<script setup lang="ts">
import { ref } from 'vue'
import NavBar from '@/components/NavBar.vue'

// 订单数据
const orders = ref({
  unpaid: [
    {
      id: '1000234589',
      shop: '肯德基（嘉年华店）',
      total: 54,
      time: '2024-05-25 18:30',
      status: '待支付'
    }
  ],
  paid: [
    {
      id: '1000234577',
      shop: '海底捞火锅（同德店）',
      total: 182,
      time: '2024-05-24 19:20',
      status: '已支付'
    },
    {
      id: '1000234490',
      shop: '霸王茶姬（欣都龙城店）',
      total: 24,
      time: '2024-05-23 14:15',
      status: '已完成'
    }
  ]
})

// 是否展开订单详情
const expandedOrder = ref<number|null>(null)  // 订单id

// 切换订单展开状态
const toggleOrderDetail = (orderId: number) => {
  expandedOrder.value = expandedOrder.value === orderId ? null : orderId
}
</script>

<template>
  <div class="pb-24">
    <!-- 订单标签页 -->
    <div class="flex bg-white border-b border-gray-200">
      <div class="flex-1 py-3 text-center font-medium">全部</div>
      <div class="flex-1 py-3 text-center font-medium text-primary border-b-2 border-primary">待支付</div>
      <div class="flex-1 py-3 text-center font-medium">已支付</div>
    </div>
    
    <!-- 待支付订单 -->
    <div class="mt-4 px-4">
      <h2 class="text-lg font-bold mb-3">待支付</h2>
      <div class="space-y-3">
        <div 
          v-for="order in orders.unpaid" 
          :key="order.id"
          class="bg-white rounded-lg shadow-sm overflow-hidden"
        >
          <div class="p-4 border-b border-gray-100">
            <div class="flex justify-between">
              <span class="text-gray-500">订单号：{{ order.id }}</span>
              <span class="text-primary">{{ order.status }}</span>
            </div>
            <div class="mt-2 font-bold">{{ order.shop }}</div>
            <div class="mt-2 text-gray-500">{{ order.time }}</div>
            <div class="mt-3 flex justify-between items-center">
              <div class="text-red-500 font-bold">¥{{ order.total }}</div>
              <div class="space-x-2">
                <button class="px-4 py-1 border border-gray-300 rounded-full text-sm">取消订单</button>
                <button class="px-4 py-1 bg-primary text-white rounded-full text-sm">去支付</button>
              </div>
            </div>
          </div>
          
          <div 
            class="px-4 py-2 bg-gray-50 text-center text-sm text-gray-500 flex-center cursor-pointer"
            @click="toggleOrderDetail(Number(order.id))"
          >
            订单详情
            <div 
              class="ml-2 transform transition-transform"
              :class="expandedOrder === Number(order.id) ? 'rotate-180' : ''"
            >
              <div class="i-material-symbols:keyboard-arrow-down"></div>
            </div>
          </div>
          
          <!-- 订单详情展开部分 -->
          <div 
            v-show="expandedOrder === Number(order.id)"
            class="p-4 border-t border-gray-100 text-sm"
          >
            <div class="flex justify-between py-2">
              <span class="text-gray-500">香辣鸡腿堡 × 2</span>
              <span>¥44.00</span>
            </div>
            <div class="flex justify-between py-2">
              <span class="text-gray-500">薯条（大） × 1</span>
              <span>¥15.00</span>
            </div>
            <div class="flex justify-between py-2 text-gray-500">
              <span>配送费</span>
              <span>¥5.00</span>
            </div>
            <div class="flex justify-between py-2 text-primary">
              <span>店铺优惠</span>
              <span>-¥10.00</span>
            </div>
            <div class="border-t border-gray-100 pt-2 mt-2 text-right">
              <span class="mr-2">合计</span>
              <span class="text-red-500 font-bold">¥54.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 已支付订单 -->
    <div class="mt-6 px-4">
      <h2 class="text-lg font-bold mb-3">已支付</h2>
      <div class="space-y-3">
        <div 
          v-for="order in orders.paid" 
          :key="order.id"
          class="bg-white rounded-lg shadow-sm"
        >
          <div class="p-4">
            <div class="flex justify-between">
              <span class="text-gray-500">订单号：{{ order.id }}</span>
              <span :class="order.status === '已支付' ? 'text-green-500' : 'text-gray-500'">{{ order.status }}</span>
            </div>
            <div class="mt-2 font-bold">{{ order.shop }}</div>
            <div class="mt-2 text-gray-500">{{ order.time }}</div>
            <div class="mt-3 flex justify-between">
              <div class="text-red-500 font-bold">¥{{ order.total }}</div>
              <button class="px-4 py-1 border border-gray-300 rounded-full text-sm">再来一单</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <NavBar />
</template>